<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
	<title>LibreSpeed Example</title>
	<link rel="shortcut icon" href="favicon.ico">
	<script type="text/javascript" src="speedtest.js"></script>
	<script type="text/javascript">

		//INITIALIZE SPEEDTEST
		var s = new Speedtest(); //create speedtest object
		//CUSTOM SETTINGS HERE
		s.setParameter("test_order", "D_U"); //we only want download and upload test
		s.setParameter("time_auto", false); //fixed duration for tests
		s.setParameter("time_dl_max", 10); //10 seconds for the download test
		s.setParameter("time_ul_max", 15); //15 seconds for the upload test
		//END OF CUSTOM SETTINGS
		s.onupdate = function (data) { //callback to update data in UI
			I("dlText").textContent = (data.testState == 1 && data.dlStatus == 0) ? "..." : data.dlStatus;
			I("ulText").textContent = (data.testState == 3 && data.ulStatus == 0) ? "..." : data.ulStatus;
		}
		s.onend = function (aborted) { //callback for test ended/aborted
			I("startStopBtn").className = ""; //show start button again
			if (aborted) { //if the test was aborted, clear the UI and prepare for new test
				initUI();
			}
		}

		function startStop() { //start/stop button pressed
			if (s.getState() == 3) {
				//speedtest is running, abort
				s.abort();
			} else {
				//test is not running, begin
				s.start();
				I("startStopBtn").className = "running";
			}
		}

		//function to (re)initialize UI
		function initUI() {
			I("dlText").textContent = "";
			I("ulText").textContent = "";
		}

		function I(id) { return document.getElementById(id); }
	</script>

	<style type="text/css">
		html,
		body {
			border: none;
			padding: 0;
			margin: 0;
			background: #FFFFFF;
			color: #202020;
		}

		body {
			text-align: center;
			font-family: "Roboto", sans-serif;
		}

		h1 {
			color: #404040;
		}

		#startStopBtn {
			display: inline-block;
			margin: 0 auto;
			color: #6060AA;
			background-color: rgba(0, 0, 0, 0);
			border: 0.15em solid #6060FF;
			border-radius: 0.3em;
			transition: all 0.3s;
			box-sizing: border-box;
			width: 8em;
			height: 3em;
			line-height: 2.7em;
			cursor: pointer;
			box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(0, 0, 0, 0.1);
		}

		#startStopBtn:hover {
			box-shadow: 0 0 2em rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.1);
		}

		#startStopBtn.running {
			background-color: #FF3030;
			border-color: #FF6060;
			color: #FFFFFF;
		}

		#startStopBtn:before {
			content: "Start";
		}

		#startStopBtn.running:before {
			content: "Abort";
		}

		#test {
			margin-top: 2em;
			margin-bottom: 12em;
		}

		div.testArea {
			display: inline-block;
			width: 14em;
			height: 9em;
			position: relative;
			box-sizing: border-box;
		}

		div.testName {
			position: absolute;
			top: 0.1em;
			left: 0;
			width: 100%;
			font-size: 1.4em;
			z-index: 9;
		}

		div.meterText {
			position: absolute;
			bottom: 1.5em;
			left: 0;
			width: 100%;
			font-size: 2.5em;
			z-index: 9;
		}

		#dlText {
			color: #6060AA;
		}

		#ulText {
			color: #309030;
		}

		div.meterText:empty:before {
			color: #505050 !important;
			content: "0.00";
		}

		div.unit {
			position: absolute;
			bottom: 2em;
			left: 0;
			width: 100%;
			z-index: 9;
		}

		div.testGroup {
			display: inline-block;
		}

		@media all and (max-width:65em) {
			body {
				font-size: 2vw;
			}
		}

		@media all and (max-width:40em) {
			body {
				font-size: 0.8em;
			}

			div.testGroup {
				display: block;
				margin: 0 auto;
			}
		}
	</style>
</head>

<body>
	<h1>LibreSpeed Example</h1>
	<div id="startStopBtn" onclick="startStop()"></div>
	<div id="test">
		<div class="testGroup">
			<div class="testArea">
				<div class="testName">Download</div>
				<div id="dlText" class="meterText"></div>
				<div class="unit">Mbps</div>
			</div>
			<div class="testArea">
				<div class="testName">Upload</div>
				<div id="ulText" class="meterText"></div>
				<div class="unit">Mbps</div>
			</div>
		</div>
	</div>
	<a href="https://github.com/librespeed/speedtest">Source code</a>
	<script type="text/javascript">
		initUI();
	</script>
</body>

</html>